<template>
	<view class="classLayout pageBg">
		<custom-nav-bar :title="'分类'"></custom-nav-bar>
		
		<view class="classify">
			<theme-item v-for="item in classifyList" :key="item._id" :info="item"></theme-item>
		</view>
		
		<view class="lodingLayout" v-if="isReachBottom">
			<uni-load-more status="noMore"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { getClssifyAPI } from '@/api/class.js'
import { onReachBottom } from '@dcloudio/uni-app';

const classifyList = ref([])
const paging = ref({
	pageNum: 1,
	pageSize: 15
})
const isReachBottom = ref(false)

const getClassifyList = async () => {
	const res = await getClssifyAPI({ pageNum: paging.value.pageNum, pageSize: paging.value.pageSize })
	if(res.errCode === 0) {
		classifyList.value = classifyList.value.concat(...res.data)
		// console.log('专题精选：', classifyList.value);
	} else {
		uni.showToast({ title: res.errMsg, icon: 'error' })
		console.error(res)
	}
}

// 触底加载
onReachBottom(async () => {
	if(classifyList.value.length >= 20) {
		isReachBottom.value = true
		return
	};
	paging.value.pageNum += 1
	uni.showLoading({ title: '加载中' })
	await  getClassifyList()
	uni.hideLoading()
})

onBeforeMount(() => {
	getClassifyList()
})
</script>

<style lang="scss" scoped>
.classify {
	padding: 30rpx;
	display: grid;
	gap: 15rpx;
	grid-template-columns: repeat(3, 1fr);
}
</style>
